<template>
  <a-card :bordered="false" class="card-area">

    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <!-- 搜索区域 -->
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
            <a-col :md="4" :sm="8">
            <a-form-item label="所属商家" >
              <a-select v-model="queryParam.merchId"  placeholder="请选择商家"
                show-search :filter-option="filterOption"  allow-clear>
                <a-select-option v-for="obj in merchList" :key="obj.value">{{ obj.text }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="8">
            <a-form-item label="优惠券名称" >
              <a-input placeholder="请输入优惠券名称" v-model="queryParam.couponName"></a-input>
            </a-form-item>
          </a-col>
           <a-col :md="4" :sm="4">
             <a-form-item label="券类型">
                 <a-select v-model="queryParam.couponType" placeholder="请选择券类型"  :allowClear="true">
                  <a-select-option value="">请选择</a-select-option>
                  <a-select-option value="1">折扣券</a-select-option>
                  <a-select-option value="2">代金券</a-select-option>
                  <a-select-option value="3">展示券</a-select-option>
                  <a-select-option value="4">下载券</a-select-option>
                  <a-select-option value="5">报名券</a-select-option>
                </a-select>
              </a-form-item>
          </a-col>
           <a-col  :md="4" :sm="24">
              <a-form-item label="行业分类">
                 <a-select v-model="queryParam.merchCategory"  placeholder="请选择行业分类">
                  <a-select-option v-for="obj in parentData" :key="obj.value"  :value="obj.value">{{ obj.text }}</a-select-option>
                 </a-select>
              </a-form-item>
            </a-col>
          <a-col :md="4" :sm="4">
            <a-form-item label="是否首推" >
              <a-select v-model="queryParam.ifTop"  placeholder="请选择是否首推"  allow-clear>
                <a-select-option value="true">是</a-select-option>
                <a-select-option value="false">否</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="4">
            <a-form-item label="发布状态" >
              <a-select v-model="queryParam.couponStatus"  placeholder="请选择发布状态"  allow-clear>
                <a-select-option value="1">未发布</a-select-option>
                <a-select-option value="2">已发布</a-select-option>
                <a-select-option value="3">已下架</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          
          <!-- <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
            <a-col :md="4" :sm="24">
              <a-button type="primary" @click="searchQuery">查询</a-button>
              <a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
            </a-col>
          </span> -->
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator"  style="margin-top: 5px">
      <a-button type="primary" @click="searchQuery">查询</a-button>
      <a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
      <a-button @click="handleAdd" type="primary" icon="plus">创建优惠券</a-button>
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="handleDel"><a-icon type="delete"/>删除</a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px">
          批量操作 <a-icon type="down" />
        </a-button>
      </a-dropdown>
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择&nbsp;<a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项&nbsp;&nbsp;
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>

      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange"
        :scroll="{ x: 'calc(700px + 50%)' }">

        <span slot="action" slot-scope="text, record" style="heigth:100px">
          <a @click="resume(record)" v-if="record.couponStatus==1">发布</a>
          <a @click="pause(record)" v-if="record.couponStatus==2">下架</a>
          <span v-if="record.couponStatus==1">
            <a-divider type="vertical" />
            <a @click="handleEdit(record)">编辑</a>
          </span>
          <a-divider type="vertical" />
          <a @click="handleDetail(record)">查看</a>
        </span>
       
        
          <div id="1234" slot="status" slot-scope="status"  :style="{height:divHeight,lineHeight:divHeight}">
            <a-tag v-if="status==1" color="orange">未发布</a-tag>
            <a-tag v-if="status==2" color="green">已发布</a-tag>
            <a-tag v-if="status==3" color="grey">已下架</a-tag>
          </div>

        <span slot="isTop" slot-scope="isTop">
            {{
                isTop==1 ? "是" : "否"
            }}
        </span>freeDrawBeginTime
        <span slot="validTime" slot-scope="text,recode">
          {{recode.validBeginTime}} 至 {{recode.validEndTime}}
        </span>

        <span slot="freeDrawTime" slot-scope="text,recode">
          {{recode.freeDrawBeginTime}} 至 {{recode.freeDrawEndTime}}
        </span>

        <span slot="couponNum" slot-scope="text,recode"> 
          {{recode.stockNum}} / {{recode.receiveNum}}
        </span>
        <img  style="width:50px;heigth:50px" slot="pic" slot-scope="pic" :src="getImgUrl(pic)" />
      </a-table>
    </div>
    <!-- table区域-end -->

    <!-- 表单区域 -->
    <coupon-modal ref="modalForm" @ok="modalFormOk"></coupon-modal>
  </a-card>
</template>

<script>
  import CouponModal from './modules/CouponModal'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import JDate from '@/components/jeecg/JDate'
  import { postAction,getAction,deleteAction } from '@/api/manage'

  export default {
    name: "CouponList",
    mixins:[JeecgListMixin],
    components: {
      CouponModal,
      JDate
    },
    data () {
      return {
        merchList:[],
        divHeight:"60px",
        href:window._CONFIG['domianURL']+"/sys/common/static/",
        // 查询条件
        queryParam: {},
        // 表头
        columns: [
           {
                title:"优惠券ID",
                align:"center",
                width: 100,
                dataIndex:"id",
                fixed: 'left',
            },
            {
                title:"优惠券名称",
                align:"center",
                width: 150,
                dataIndex:"couponName",
                fixed: 'left',
            },
             {
                title:"券类型",
                align:"center",
                width: 100,
                dataIndex:"couponType",
                ellipsis: true,
                fixed: 'left',
                 customRender:function (text,row) {
              if(text=="1"){
                return "折扣券";
              }else if(text=="2"){
                return "代金券";
              }else if(text=="3"){
                return "展示券";
              }else if(text=="4"){
                return "下载券";
              }else if(text=="5"){
                return "报名券";
              }
            }
            },
            {
                title:"所属商家",
                align:"center",
                width: 200,
                dataIndex:"merchName",
                ellipsis: true,
            },
            {
                title:"图片",
                align:"center",
                width: 150,
                dataIndex:"picUrl",
                scopedSlots: { customRender: 'pic' },
               
            },
            /*{
                title:"折扣",
                align:"center",
                width: 80,
                dataIndex:"couponDiscount"
            },*/
            {
                title:"有效期",
                align:"center",
                width: 200,
                dataIndex:"validBeginTime",
                scopedSlots: { customRender: 'validTime' },
            },
            /*{
                title:"有效结束时间",
                align:"center",
                width: 160,
                dataIndex:"validEndTime"
            },*/
            {
                title:"免费领取时段",
                align:"center",
                width: 200,
                dataIndex:"freeDrawBeginTime",
                scopedSlots: { customRender: 'freeDrawTime' },
            },
            /*{
                title:"免费领取结束时间",
                align:"center",
                width: 160,
                dataIndex:"freeDrawEndTime"
            },*/
            {
                title:"提前购买价格",
                align:"center",
                width: 110,
                dataIndex:"advancePurchasePrice"
            },
            {
                title:"总量/已领取",
                align:"center",
                width: 120,
                dataIndex:"stockNum",
                scopedSlots:{customRender:"couponNum"}
            },
            {
                title:"每人最大可领取数量",
                align:"center",
                width: 160,
                dataIndex:"useLimit"
            },
            {
                title:"是否首推",
                width: 90,
                align:"center",
                dataIndex:"ifTop",
                scopedSlots:{customRender:"isTop"}
            },
            /*{
                title:"优惠券描述",
                align:"center",
                width: 200,
                ellipsis: true,
                dataIndex:"commodityTitle"
            },
            {
                title:"使用规则说明",
                align:"center",
                width: 200,
                ellipsis: true,
                dataIndex:"useDesc"
            },*/
            {
                title:"发布状态",
                align:"center",
                width: 130,
                dataIndex:"couponStatus",
                scopedSlots:{customRender:"status"},
                fixed: 'right',
            },{
                title: '操作',
                width: 150,
                dataIndex: 'action',
                align:"center",
                scopedSlots: { customRender: 'action' },
                fixed: 'right',
            }
        ],
        parentData:[],
        url: {
          parentData:"/adh/shopCategory/queryParentData",
          list: "/adh/coupon/list",
          delete: "/adh/coupon/delete",
          deleteBatch: "/adh/coupon/deleteBatch",
          updateStatus:"/adh/coupon/updateStatus",
          merchListUrl:"/adh/coupon/queryMerchList",
        },
      }
    },
    created(){
      this.queryMerchList();
      this.queryParentData();
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      }
    },
    methods: {
       queryParentData(){
        var that = this;
        getAction(this.url.parentData,{}).then((res)=>{
        if(res.success){
            that.parentData = res.result;
          }
        })
      },
      queryMerchList(){
        var that = this;
        getAction(this.url.merchListUrl,{}).then((res)=>{
        if(res.success){
            that.merchList = res.result;
          }
        })
      },
      onChangeDate(date, dateString) {
        console.log(date, dateString);
      },
      resume(record){
        var that = this;
        this.$confirm({
          title:"确认发布",
          content:"是否发布当前优惠券?",
          onOk: function(){
            postAction(that.url.updateStatus,{id:record.id,status:"2"}).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.loadData();
                that.onClearSelected();
              }else{
                that.$message.warning(res.message);
              }
            });
          }
        });
      },
      pause(record){
        var that = this;
        this.$confirm({
          title:"确认下架",
          content:"是否下架当前优惠券?",
          onOk: function(){
            postAction(that.url.updateStatus,{id:record.id,status:"3"}).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.loadData();
                that.onClearSelected();
              }else{
                that.$message.warning(res.message);
              }
            });
          }
        });
      },
      getImgUrl(picUrl){
        if(picUrl&&picUrl.split(",").length>0){
            return this.href + picUrl.split(",")[0];
        }else{
           return "";
        }
      },
      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
      handleDel(){
        
        var ifDel = true;
        var that = this;
        this.selectionRows.forEach(function(el){
            if(el.couponStatus==="2" || el.couponStatus==="3"){
              ifDel = false;
            }
        });
        if(ifDel){
          deleteAction(this.url.deleteBatch, {ids: this.selectedRowKeys.join(",")}).then((res) => {
           if(res.success){
              that.$message.success(res.message);
              that.loadData();
              that.onClearSelected();
            }else{
              that.$message.warning(res.message);
            }
          });
        }else{
          that.$message.warning("不允许对已发布或下架的优惠券进行删除操作");
        }
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less'
</style>